<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link th:href="@{/js/el/element.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <div th:include="~{common/head-signin::head}"></div>
        <div style="display: flex;justify-content: baseline;margin-top: 15px">
            <el-form label-position="right" label-width="80px" :model="user">
                <el-form-item label="用户名">
                    <el-input placeholder="请输入用户名"
                              v-model="user.username" clearable></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="user.sex" placeholder="请选择">
                        <el-option label="男" :value="user.man"></el-option>
                        <el-option label="女" :value="user.girl"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="user.role" placeholder="请选择">
                        <el-option label="P" :value="user.P"></el-option>
                        <!--<el-option label="G" :value="user.G"></el-option>-->
                    </el-select>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input placeholder="请输入昵称"
                              v-model="user.nickname" clearable></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input placeholder="请输入邮箱"
                              v-model="user.mailbox" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码"
                              v-model="user.password" show-password></el-input>
                </el-form-item>

                <el-form-item label="头像">
                    <el-upload class="avatar-uploader"
                               :multipe="false"
                               :show-file-list="true"
                               :auto-upload="false"
                               :before-upload="beforeUpload"
                               :file-list="fileList"
                               :on-change="handleChange"
                               action="uploadAction"
                               list-type="picture"
                               accept="image/jpg,image/jpeg">
                        <h2 style="margin-top: 0px">点击这里</h2>
                    </el-upload>
                </el-form-item>

                <el-button type="primary" v-on:click="signin()">注册</el-button>
            </el-form>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
                user:{
                    username:'',
                    sex:'',
                    role:'',
                    nickname:'',
                    mailbox:'',
                    password:'',
                    man:'男',
                    girl:'女',
                    P:"P",
                    // G:"G",
                },
            fileList:[],
        },
        methods:{
            beforeUpload(file) {
                console.log("beforeUpload=")
                console.log("file" + file)
            },
            handleChange(file, fileList) {
                this.fileList = fileList;
            },
            signin(){
                var that = this;
                var fd = new FormData();

                var files = this.fileList;
                // console.log(files)

                //判断文件
                if (files.length>0 && files[0].raw !=null) {
                    fd.append("file",files[0].raw);
                }

                axios({
                    url:"/api/public/user/add",
                    data:fd,
                    method:"post",
                    headers:{'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    params:this.user
                }).then(function (response) {
                    console.log(response)
                    console.log("====================")
                    console.log(response.data.data)
                    if (response.data.data==1){
                        that.$message({
                            showClose: true,
                            offset: 100,
                            message: "注册成功",
                            type: 'success'
                        });
                        return;
                    }
                    that.$message({
                        showClose: true,
                        offset: 100,
                        message: "用户名已存在",
                        type: 'error'
                    });
                })
            },
        },
        mounted: function(){

        }
    })
</script>
</html>